<template>
  <!-- intro-section -->
  <section id="intro-wrap" class="intro2Wrap text-white text-center">
    <b-container>
     
      <b-row class="justify-content-md-center">
        <b-col sm="12">
          <div class="intro2subtitle">
            <h3 class="font-weight-bold mb-3 text-white">http://MrPP.com</h3>
          </div>
          <h1
            class="intro2Title font-weight-bold text-42 t-shadow mb-3 text-white"
          >
            混合现实编程平台
  <b-button variant="outline-primary"  v-if="user == null">注册</b-button>
          </h1>
          <div class="intro2Description text-18">
            <p class="mb-4">用你自己的账户登录平台，查看自己满意的作品。</p>
          </div>
          <form class="row form" role="form" @submit.prevent="onSubmit">
            <div class="col-12 text-center">
              <div>
                <b-alert
                  :show="dismissCountDown"
                  dismissible
                  @dismissed="dismissCountDown = 0"
                  @dismiss-count-down="countDownChanged"
                >
                  {{ alert }}
                </b-alert>
              </div>
            </div>
            <div class="form-group mb-4 col-md-6">
              <input
                v-model="name"
                type="text"
                name="name"
                id=""
                class="form-control"
                placeholder="Your Name"
                required
              />
            </div>
            <div class="form-group mb-4 col-md-6">
              <input
                type="password"
                v-model="password"
                required
                name="password"
                class="form-control"
                placeholder="Your Password"
                aria-describedby="helpId"
              />
            </div>

            <div class="col-12 text-center">
              <router-link
                id="back-button"
                href=""
                class="btn half-button btn-outline-white btn-lg pl-5 pr-5 pb-2 text-uppercase"
                role="button"
                to="/"
                >返回</router-link
              >
              &zwj;

       


              <b-overlay
                :show="busy"
                rounded="lg"
                opacity="0.1"
                spinner-small
                pinner-variant="primary"
                class="d-inline-block small"
              ><button
                  id="submit-button"
                  type="submit"
                  class="btn half-button btn-warning btn-lg pl-5 pr-5 pb-2 text-uppercase"
                  role="button"
                  to="/login"
                >
                  提交
                </button></b-overlay>
            </div>
          </form>
        </b-col>
      </b-row>
    </b-container>
    <div class="overlay"></div>
  </section>

  <!-- end::intro-section -->
</template>

<script lang="ts">
import { AxiosRequestConfig } from 'axios';
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import LoginData from '@/components/class/LoginData';



// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
// import Identicon from 'identicon.js';
// import md5 from 'md5-node';
@Component({
  components: {
    //  HelloWorld,
  },
})
export default class Login extends Vue {
  private alert: string = '';
  private showDismissibleAlert: boolean = false;
  private name: string = '';
  private password: string = '';
  private dismissCountDown: number = 0;
  private busy: boolean = false;

 get user() {
    return this.$store.state.user;
  }
  // projects:Array<any> =[];
  public onSubmit() {
    this.busy = true;
    Vue.axios
      .post(this.$store.state.url.api + '/users/login', {
        username: this.name,
        password: this.password,
      })
      .then((response) => {
        const data: LoginData = response.data;
        if (data.access_token != null) {

          this.login(data.access_token);
        } else {
          if (data.password != null) {
            this.error(data.password);
          } else if (data.username != null) {
            this.error(data.username);
          }
        }
      }).finally(() => {
         this.busy = false;
      });
  }
  public error(message: string) {
    this.dismissCountDown = 5;

    this.password = '';
    this.alert = message;
  }
  public countDownChanged(dismissCountDown: number) {
    this.dismissCountDown = dismissCountDown;
  }
  public login(access_token: string) {
    console.log(access_token);

    this.busy = true;
    const config: AxiosRequestConfig = {};
    config.headers = {};
    config.headers.Authorization = 'Bearer ' + access_token;
    Vue.axios
      .get(this.$store.state.url.api + '/peoples', config)
      .then((response) => {
        this.busy = false;
        var user = response.data.data;
        if(user){
          this.$cookies.set('user', user);
          this.$store.commit('setUser', response.data.data);
          this.$router.push('/');
          console.log(response.data.data);
          console.log(this.$store.state.user);

        }
      }).finally(() => {
         this.busy = false;
      });
  }
}

</script>
